<template>
  <div>
    <el-table
      :data="customizedDescartes"
      style="width: 100%">

      <el-table-column label="属性组合" v-if="customizedDescartes&&customizedDescartes[0]">
        <!--
        需要结合
            <el-table :data="Descartes" 才能使用，绑定原生的笛卡尔积

        可以正常显示，但是太简单了，后期处理起来麻烦
                <el-table-column v-for="(sellAttr,index0) in spuSellAttrValueList" :key="sellAttr.attrId"
                                 :label="sellAttr.attrName"
                                 width="120">
                  <template slot-scope="slot">

                              Descartes 笛卡尔积是一个二维数组
                              0: (3) ["赤茶橘", "8G+256G", "8G", __ob__: Observer]
                              1: (3) ["赤茶橘", "8G+256G", "6G", __ob__: Observer]
                              2: (3) ["赤茶橘", "6G+128G", "8G", __ob__: Observer]
                              3: (3) ["赤茶橘", "6G+128G", "6G", __ob__: Observer]
                              4: (3) ["天空之境", "8G+256G", "8G", __ob__: Observer]
                              5: (3) ["天空之境", "8G+256G", "6G", __ob__: Observer]
                              6: (3) ["天空之境", "6G+128G", "8G", __ob__: Observer]
                              7: (3) ["天空之境", "6G+128G", "6G", __ob__: Observer]

                                    因为 Descartes 就只是一个大二维数组，所以 slot.row 就拿到了二维数组中的一维数组，例如 ["赤茶橘", "8G+256G", "8G", __ob__: Observer]
                                  一纬数组再通过 slot.row[index0] 就能拿到对应元素了

                    <span>{{ slot.row[index0] }}</span>

          </template>
        </el-table-column>-->

        <!--<el-table-column
          prop="name"
          label="版本"
          width="120">
        </el-table-column>-->
        <el-table-column v-for="(sellAttr,index0) in customizedDescartes[0].sellAttrArray" :key="sellAttr.attrId"
                         :label="sellAttr.attrName"
                         v-if="index0<attributeCombinationCount"
                         width="120">
          <template slot-scope="slot">
            <span>{{ slot.row.sellAttrArray[index0].attrValue }}</span>
          </template>
        </el-table-column>

        <!--        <el-table-column label="排序" width="170">-->
        <!--          <template slot-scope="slot">-->
        <!--            <el-input-number v-model="slot.row.sellAttrArray[index0].attrSort" size="small"></el-input-number>-->
        <!--&lt;!&ndash;            <el-input-number v-model="slot.row.sellAttrArray[slot.$index].attrSort" size="small"></el-input-number>&ndash;&gt;-->
        <!--          </template>-->
        <!--        </el-table-column>-->


      </el-table-column>

      <el-table-column label="商品名称" width="150">
        <template slot-scope="slot">
          <el-input v-model="slot.row.skuVo.skuInfo.skuName"></el-input>
        </template>

      </el-table-column>

      <el-table-column label="标题" width="150">
        <template slot-scope="slot">

          <el-input v-model="slot.row.skuVo.skuInfo.skuTitle"></el-input>
        </template>
      </el-table-column>

      <el-table-column label="副标题" width="150">
        <template slot-scope="slot">
          <el-input v-model="slot.row.skuVo.skuInfo.skuSubtitle"></el-input>
        </template>
      </el-table-column>

      <el-table-column label="价格" width="170" prop="price">
        <template slot-scope="slot">
          <el-input-number v-model="slot.row.skuVo.skuInfo.price" :step="1"
                           size="small"></el-input-number>
        </template>
      </el-table-column>

      <el-table-column label="打折信息" width="100">
      </el-table-column>


      <el-table-column label="选择图集" type="expand" width="100">

        <template slot-scope="slot">

          <el-form label-position="left" class="demo-table-expand">

            <el-form-item label="商品图集">

              <el-button type="primary" size="small" @click="operateImagesHandler">上传图片</el-button>

              <el-checkbox-group
                v-model="slot.row.skuVo.skuInfo.skuDescForStoreIndex"
                @change="handleCheckedImagesChange(slot.row.skuVo.skuInfo.skuDescForStoreIndex)">

                <el-checkbox v-for="(img,index) in itemImages" :label="index" :key="index"
                             v-if="itemImages.length>0&&img.imgUrl!=null">
                  <img :src="hostAddress+img.imgUrl" alt="" width="100">
                  <el-radio v-model="slot.row.skuVo.skuInfo.skuDefaultImg" :label="img.imgUrl" border size="mini">设为默认</el-radio>
                </el-checkbox>

              </el-checkbox-group>
              <!--<div v-for="(img,index) in itemImages" v-if="hostAddress" style="float: left">

              </div>-->
              <!--              {{slot.row[attributeCombinationCount].skuDesc}}-->
            </el-form-item>

            <el-form-item label="设置折扣">
              满&nbsp;<el-input-number v-model="slot.row.skuVo.skuLadder.fullCount"
                                      size="small"></el-input-number>&nbsp;件&nbsp;&nbsp;&nbsp;
              打&nbsp;<el-input-number v-model="slot.row.skuVo.skuLadder.discount"
                                      size="small"></el-input-number>&nbsp;折
              <el-checkbox v-model="slot.row.skuVo.skuLadder.addOther">可叠加优惠</el-checkbox>
            </el-form-item>


            <el-form-item label="设置满减">
              满&nbsp;<el-input-number v-model="slot.row.skuVo.fullReduction.fullPrice"
                                      size="small"></el-input-number>&nbsp;元，&nbsp;&nbsp;&nbsp;
              减&nbsp;<el-input-number v-model="slot.row.skuVo.fullReduction.reducePrice"
                                      size="small"></el-input-number>&nbsp;元
              <el-checkbox v-model="slot.row.skuVo.fullReduction.addOther">可叠加优惠</el-checkbox>
            </el-form-item>

            <el-form-item label="设置会员价格">
              <div v-for="(mprice,index) in slot.row.skuVo.memberPrice" style="float: left">
                <span>{{ mprice.memberLevelName }}</span>：
                <el-input-number v-model="mprice.memberPrice" size="small"></el-input-number>&nbsp;
                <el-checkbox v-model="mprice.addOther">可叠加优惠</el-checkbox>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
              </div>
            </el-form-item>
          </el-form>
        </template>

      </el-table-column>
    </el-table>
    <operate-images ref="operateImagesRef"></operate-images>
  </div>
</template>

<script>
import 'default-passive-events'
import attr from '../baseAttrComponent/attr'
import DescartesUtils from '../../../../utils/CartesianProduct'
import uploadToAiliOss from '../../../../api/uploadToAiliOss'
import operateImages from './operateImages'
import OperateImages from './operateImages'

const testImagesData = [
  {
    defaultImg: null,
    id: null,
    imgName: '1.jpg',
    imgSort: 0,
    imgUrl: '2020/09/29/0641ac25-4460-4cc5-8c6f-680d107c0342-1.jpg',
    spuId: null,
  }, {
    defaultImg: null,
    id: null,
    imgName: '3.jpg',
    imgSort: 2,
    imgUrl: '2020/09/29/16aa583f-982e-43f8-8144-ae9ff3a6fe78-2.jpg',
    spuId: null,
  }, {
    defaultImg: null,
    id: null,
    imgName: '1.jpg',
    imgSort: 3,
    imgUrl: '2020/09/29/3c3cbf75-cb2d-420d-877d-54d648261525-1.jpg',
    spuId: null,
  }, {

    defaultImg: null,
    id: null,
    imgName: '2.jpg',
    imgSort: 4,
    imgUrl: '2020/09/29/647164b4-942b-41b9-8834-1395fbca1d25-5.jpg',
    spuId: null,
  }, {
    defaultImg: null,
    id: null,
    imgName: '3.jpg',
    imgSort: 5,
    imgUrl: '2020/09/29/74d1de57-8dac-44fe-821f-a9331f58228c-1.jpg',
    spuId: null,
  }, {
    defaultImg: null,
    id: null,
    imgName: '1.jpg',
    imgSort: 6,
    imgUrl: '2020/09/29/87ecae0e-e3e3-41d1-8a6f-ee56b2d80615-2.jpg',
    spuId: null,

  }, {
    defaultImg: null,
    id: null,
    imgName: '2.jpg',
    imgSort: 7,
    imgUrl: '2020/09/29/9876afb5-ff34-4e66-8cfa-7db8b22118c3-2.jpg',
    spuId: null,
  }, {
    defaultImg: null,
    id: null,
    imgName: '3.jpg',
    imgSort: 8,
    imgUrl: '2020/09/29/a380dbe7-952c-4e12-8cf1-d9f49652482f-4.jpg',
    spuId: null,
  }
]
export default {
  name: 'skuInfo',
  components: {OperateImages},
  props: ['hub'],
  data () {
    return {
      spuSellAttrValueList: [],
      Descartes: [],
      customizedDescartes: [],
      attributeCombinationCount: 0, // 总共有几个组合属性
      itemImages: [],
      hostAddress: null,
      isOperatingImagesVisible: false,
      localHub: null,
      step1Data: null,
      sellAttrList: null
    }
  },
  methods: {
    init (sellAttrList, step1Data) {

      if (step1Data) {

        this.step1Data = step1Data
      }

      this.sellAttrList = sellAttrList

      this.spuSellAttrValueList = sellAttrList

      this.attributeCombinationCount = sellAttrList.length

      // console.log('步骤一传入的数据是', step1Data)

      this.itemImages = step1Data ? step1Data.images : testImagesData

      // console.log(`第三步总共传入了${this.attributeCombinationCount}个属性`)

      /**
       * 传入时的数据
       0:
       attrId: 18
       attrName: "选择版本"
       attrValue: "8G+256G"
       1:
       attrId: 19
       attrName: "内存"
       attrValue: "6G,8G"
       * */
      if (sellAttrList && typeof sellAttrList === 'object') {

        let attrValueArray = []

        sellAttrList.forEach((attr, index) => {

          attrValueArray.push(attr.attrValue.split(','))
        })

        /**
         * 解析后的二维数组
         * 0: (2) ["赤茶橘", "天空之境"]
         * 1: (2) ["8G+256G", "6G+128G"]
         * 2: (2) ["8G", "6G"]
         * */
        // console.log('二维数组是', attrValueArray)

        this.Descartes = DescartesUtils.descartes(attrValueArray)

        // console.log('笛卡尔积是', this.Descartes)

        /**
         * 步骤三提交的数据
         0:
         attrId: 15
         attrName: "颜色"
         attrValue: "赤茶橘,天空之境"
         1:
         attrId: 18
         attrName: "选择版本"
         attrValue: "8G+256G"
         *
         * */

        // 自定义笛卡尔积
        this.customizedDescartes = this.Descartes.map((array, index) => {

          let sellAttrArray = []
          for (let i = 0; i < array.length; i++) {
            sellAttrArray.push({
              'attrName': this.spuSellAttrValueList[i].attrName,
              'attrValue': array[i],
              'attrId': this.spuSellAttrValueList[i].attrId,
            })
          }

          let tempStr = ''
          sellAttrArray.forEach(t => {
            tempStr += ' | ' + t.attrValue
          })

          // 将非销售信息以对象的形式粘贴在 tempArray的最后面
          let skuVo = {
            'skuInfo': {
              'skuName': ((step1Data && step1Data.spuName != null) ? step1Data.spuName : '') + tempStr,
              'skuTitle': '',
              'skuSubtitle': '',
              'price': null,
              'skuDescForStoreIndex': [],
              'skuDesc': null,
              'skuDefaultImg':null
            },
            'fullReduction': {
              'fullPrice': null,
              'reducePrice': null,
              'addOther': null
            },
            // 满几件，打几折
            'skuLadder':{
              'fullCount':null,
              'discount':null,
              'addOther': null
            },
            'memberPrice': [
              {
                'addOther': false,
                // "id": 0,
                'memberLevelId': null,
                'memberLevelName': '金牌会员',
                'memberPrice': null,
                // "skuId": 0
              }, {
                'addOther': false,
                // "id": 0,
                'memberLevelId': null,
                'memberLevelName': '银牌会员',
                'memberPrice': null,
                // "skuId": 0
              }, {
                'addOther': false,
                // "id": 0,
                'memberLevelId': null,
                'memberLevelName': '铜牌会员',
                'memberPrice': null,
                // "skuId": 0
              }
            ]
          }

          return {
            sellAttrArray,
            skuVo
          }

        })

        console.log('处理后的笛卡尔积是', this.customizedDescartes)
      }
    },

    async getHostAddress () {
      let p = await uploadToAiliOss.getHostAddress()
      this.hostAddress = p.data.host + '/'
    },
    handleCheckedImagesChange (val) {
      console.log('选中的图片更新了', val)
    },
    operateImagesHandler () {
      this.$refs.operateImagesRef.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs.operateImagesRef.hostAddress = this.hostAddress
        this.$refs.operateImagesRef.initImageList(this.itemImages)

        this.$refs.operateImagesRef.hub = this.localHub
        console.log('skuInfo中的hub是', this.localHub)
      })
    },
    getCustomizedDescartes () {
      this.customizedDescartes.forEach((sku, index) => {

        if (sku.skuVo.skuInfo.skuDescForStoreIndex.length > 0) {
          /**
           * skuDesc 中的数组中的元素指向的是imagesList的索引，需要通过这个方法解析为url
           * */
          sku.skuVo.skuInfo.skuDesc = sku.skuVo.skuInfo.skuDescForStoreIndex.map(imgIndex => {
            if (imgIndex < this.itemImages.length) {

              return this.itemImages[imgIndex].imgUrl
            }
          }).filter(img => {
            return img != null
          }).join(',')

          // 防止数组为[]的时候，最后提交上去的也是[]造成异常
        }
      })
      console.log(this.customizedDescartes)
      return this.customizedDescartes
    }
  },
  watch: {

    localHub (val) {
      // console.log('skuInfo中监控到hub更新了', val)

      if (this.localHub == null) {
        val.$on('update-image-list-of-step1', (images => {
          // this.step1Data.images = images
          this.itemImages = images
          // console.log('步骤四 skuInfo 中的images已经更新', this.itemImages)
          // this.init(this.sellAttrList, this.step1Data)
        }))
      }

    },

    /*spuSellAttrValueList (sellAttrList) {

    },*/

  },
  created () {
    this.getHostAddress()
  }
}
</script>

<style scoped>

</style>
